<template>
    <div class="userEdit" style="width: 500px;">
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%" :dialogInfo.sync="dialogInfo" :before-close="handleClose">
            <span slot="footer" class="dialog-footer">
                <el-descriptions title="">
                    <!-- <el-descriptions-item label="订单详情">{{ ruleForm.orderDetailList }}</el-descriptions-item> -->
                    <el-descriptions-item label="收货人">{{ ruleForm.consignee }}</el-descriptions-item>
                    <el-descriptions-item label="菜品">{{ ruleForm.orderDishes }}</el-descriptions-item>
                    <el-descriptions-item label="金额">{{ ruleForm.amount }}</el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-tag size="small">{{ruleForm.remark}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址">{{ ruleForm.address }}</el-descriptions-item>
                </el-descriptions>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// import { Message } from 'element-ui'
export default {
  name: 'dishEditView',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogInfo: Object

  },
  watch: {
    dialogInfo: {
      handler (newVal, oldVal) {
        this.ruleForm = Object.assign({
          orderDetailList: newVal.orderDetailList, // 订单详情
          consignee: newVal.consignee, // 收货人
          orderDishes: newVal.orderDishes, // 菜品
          amount: newVal.amount, // 金额
          address: newVal.address, // 地址
          remark: newVal.remark// 备注
        })
        console.log(newVal, oldVal)
      }
    }
  },
  data () {
    return {
      ruleForm: {
        orderDetailList: '', // 订单详情
        consignee: '', // 收货人
        orderDishes: '', // 菜品
        amount: '', // 金额
        address: ''// 地址
      }
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>
  <style>
